<template>
  <div class="header">
	<!-- 头部视图 -->
  	<div class="content-wrapper">
  		<!-- 头像 -->
  		<div class="avatar">
  			<img width="64" height="64" :src="seller.avatar">
  		</div>
  		<div class="content">
  			<!-- name -->
  			<div class="title">
  				<span class="brand">icon</span>
  				<span class="name">{{seller.name}}</span>
  			</div>
  			<!-- 描述 -->
  			<div class="desc">
  				{{seller.description}}/{{seller.deliveryTime}}分钟送达
  			</div>
  			<!-- 活动 -->
  			<div v-if="seller.supports" class="support">
  				<span class="icon">icon</span>
  				<span class="text">{{seller.supports[0].description}}</span>
  			</div>
  		</div>
  	</div>
  	<!-- 底部浮层 -->
  	<div class="bulletin-wrapper">
  		
  	</div>

  </div>
</template>

<script type="text/ecmascript-6">
  /* eslint-disable */
  export default {

  	props : {
  		seller : {
  			type : Object
  		}
  	},
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">

	@import "../../common/mixin"
	.header
		color: #fff
		background: #000
		font-size: 0px
		.content-wrapper
			padding: 24px 12px 18px 24px
			.avatar
				display: inline-block
				img
					border-radius: 2px
			.content
				display: inline-block
				vertical-align: top 
				margin-left: 16px
				font-size: 14px
				.title
					margin: 2px 0px 8px 0px
					.brand
						display: inline-block 
						vertical-align: top 
						width: 30px
						height: 18px
						// bg-image('brand')
						background-size: 30px 18px
						background-repeat: no-repeat
					.name
						margin-left: 6px
						font-size: 20px
						line-height: 20px
						font-weight: bold
				.desc
					margin-bottom: 10px
					line-height: 12px
					font-size: 12px
				.supports
					.icon
						display: inline-block
						width: 12px
						height: 12px
						margin-left: 4px
					.text
						display: inline-block
						width: 12px
						height: 12px
						
						
			
		
</style>
